<template>
	<view class="page">
		<view class="header" :style="{paddingTop:statusBarHeight+'px'}">
			<view class="hezi">
				<view class="boxs">
					<view class="box" :class="selected=='0'?'active':''" @tap='select(0)'>
						跨链
					</view>
					<view class="box" :class="selected=='1'?'active':''" @tap='select(1)'>
						兑换
					</view>
					<view class="box" :class="selected=='2'?'active':''" @tap='select(2)'>
						行情
					</view>
				</view>
			</view>
		</view>
		<view class="zhead" :style="{paddingTop:statusBarHeight+'px'}"></view>
		<view class="blockcotent">
			<view class="bigblock">
				<view class="uni-margin-wrap">
					<swiper class="swiper" :current='selected' @change='change'>
						<swiper-item>
							<Jumpcross v-if="addressinfo&&addressinfo.chainType=='ETH'&&addressinfo.chainId=='5867'"
								ref="Jumpcross" @openselectchain='openselectchain' @approveopen="approveopen"
								@executionopen="executionopen" @addCrossLog='addCrossLog' :log="crosslog"
								@openselectaddress="openselectaddres" :selectAddress='selectAddress'></Jumpcross>
							<Bsccross v-if="addressinfo&&addressinfo.chainType=='ETH'&&addressinfo.chainId=='56'"
								ref="Bsccross" @openselectchain='openselectchain' @approveopen="approveopen"
								@executionopen="executionopen" @addCrossLog='addCrossLog' :log="crosslog"
								@openselectaddress="openselectaddres" :selectAddress='selectAddress'></Bsccross>
							<Troncross v-if="addressinfo&&addressinfo.chainType=='TRON'&&addressinfo.chainId=='0'"
								ref="Troncross" @openselectchain='openselectchain' @approveopen="approveopen"
								@executionopen="executionopen" @addCrossLog='addCrossLog' :log="crosslog"
								@openselectaddress="openselectaddres" :selectAddress='selectAddress'></Troncross>
						</swiper-item>
						<swiper-item>
							<Swap ref="swap" @openselecttoken='openselecttoken' @approveopen="approveopen"
								@executionopen="executionopen" @addSwapLog="addSwapLog" :log="swaplog">
							</Swap>
						</swiper-item>
						<swiper-item>
							<hangqing></hangqing>
							<!-- <zanwei style="padding-top:400upx;"></zanwei> -->
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 选择代币弹窗 -->
		<uni-popup ref="popup1">
			<view class="block3">
				<view class="line1">
					<text class="text1">选择链</text>
					<uni-icons class="icon1" type="closeempty" size="16" color="#666666"
						@tap="closeselectchain"></uni-icons>
				</view>
				<view class="line2box" style="overflow-y:scroll;height:500upx;width:100%;">
					<view class="line2" v-for="(item,index) in allchains" @click="selectchain(item)">
						<view class="left" v-if="item&&item.chainName!='JumpFinance'">
							<image class="image1" :src="'../../static/images/chain/'+item.chainName+'.png'"
								mode="widthFix"></image>
							<view class="text1">{{item.chainName}}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 代币授权弹窗 -->
		<uni-popup ref="popup2">
			<view class="block4">
				<view class="title">
					{{token}}代币授权
				</view>
				<view class="line3">
					<text class="tip">*</text>{{tip}}
				</view>
				<view class="line4">
					<view class="button button1" @tap="approveclose">
						取消
					</view>
					<view class="button button2" @tap='approve'>
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择代币弹窗 -->
		<uni-popup ref="popup3">
			<view class="block3">
				<view class="line1">
					<text class="text1">选择币种</text>
					<uni-icons class="icon1" type="closeempty" size="16" color="#666666"
						@tap="closeselecttoken"></uni-icons>
				</view>
				<view class="line2box" style="overflow-y:scroll;height:500upx;width:100%;">
					<view class="line2" v-for="(item,index) in tokenlist" @click="selecttoken(item)">
						<view class="left">
							<image class="image1"
								:src="'../../static/images/tokenicon/'+item.contract+addressinfo.chainType+addressinfo.chainId+'.png'"
								mode="widthFix"></image>
							<view class="text1">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部确认弹窗 -->
		<uni-popup ref="popup4" type="bottom" background-color="#FFFFFF" border-radius="10px 10px 0 0">
			<view class="popupTitle">
				交易详情
			</view>
			<view class="numberBox">
				<view class="number">
					<text
						v-if="implementinfo.methond=='swapExactETHForTokens'">{{ Number(Number(implementinfo.value).toFixed(4)) }}{{chainInfo.mainCoinName}}</text>
					<text
						v-if="implementinfo.methond=='swapExactTokensForETH'||implementinfo.methond=='swapExactTokensForTokens'||implementinfo.methond=='exchange'">{{ Number(Number(implementinfo.num).toFixed(4)) }}{{implementinfo.symbol}}</text>
					<text v-if="implementinfo.methond=='approve'">申请代币{{implementinfo.symbol}}转账授权</text>
				</view>
			</view>

			<view class="fromAddress">
				<view class="left">
					付款地址
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.from}}
					</view>
				</view>
			</view>
			<view class="toAddress">
				<view class="left">
					接收地址
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.to}}
					</view>
				</view>
			</view>
			<view class="toAddress">
				<view class="left">
					网络费
				</view>
				<view class="right">
					<view class="address">
						{{implementinfo.fee}}{{chainInfo.mainCoinName}}
					</view>
					<text class="chain" v-if="type!='TRONCROSS'">=Gas Limit({{implementinfo.gasLimit}})*Gas
						Price({{ Number(Number(implementinfo.gasPrice).toFixed(4)) }}gwei) </text>
				</view>
			</view>

			<view class="popupBtn">
				<view class="pbtn quxiaopth" @tap="cancel">
					取消
				</view>
				<view class="pbtn" @tap="determine">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 选择地址弹框 -->
		<uni-popup ref="popup5" type="bottom" background-color="#FFFFFF" border-radius="10px 10px 0 0">
			<view class="popupTitle">
				请选择接收地址
				<uni-icons class="icon1 iconfont" type="closeempty" size="20" color="#666666"
					@tap="closeselectaddress"></uni-icons>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<!-- {{allchains}} -->
				<view class="item" v-for="(item,index) in list" :key="index" @tap="selectaddress(item.address)">
					<image :src="'/static/images/chain/' +item.chainName+'.png'" mode="" class="chainIcon"></image>
					<view class="con">
						<view class="name">
							{{item.name}}
						</view>
						<view class="address">
							{{$utils.formatAddress(item.address)}}
						</view>
					</view>
					<image src="../../static/images/personal/iptRight.png" mode="widthFix" class="icon"></image>
				</view>
			</scroll-view>
		</uni-popup>
		<!-- 密码弹窗 -->
		<PasswordPopup ref="passwordPopup" @close="passwordclose" @confirm="implement" />
	</view>
	<tabbar :selectedIndex="1"></tabbar>
</template>
<script>
	import {
		getSwapCoin,
		crossLogs,
		swapLogs,
		addSwapLog,
		addCrossLog
	} from '@/http/api.js';
	import common from '@/js_sdk/common/common.js'
	export default {
		data() {
			return {
				selected: 0,
				statusBarHeight: "",
				// 底部弹窗数据
				implementinfo: null,
				password: "",
				tokenlist: [],
				token: null,
				type: "",
				tip: "",
				crosslog: [],
				swaplog: [],
				list: [],
				selectAddress: "",
				toChainId: ""
			}
		},
		computed: {
			addressinfo() {
				return this.$store.getters.addressInfo
			},
			allchains() {
				return this.$store.getters.getAllchains;
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			address() {
				return this.$store.getters.getAddress
			},
			chainId() {
				return this.$store.getters.getChainId
			},
		},
		watch: {
			chainId() {
				this.selectAddress = ''
				this.toChainId = ""
				this.crosslog = []
				this.swaplog = []
				this.crossLogs()
				this.swapLogs()
				this.getIdList()
			}
		},
		mounted() {
			uni.hideTabBar()
			// 获取设备状态栏高度用以增加顶部间距
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarHeight = e.statusBarHeight
				}
			})
			this.getSwapCoin()
			this.crossLogs()
			this.swapLogs()
			this.getIdList()
		},
		methods: {
			...common.methonds,
			//添加兑换记录
			addSwapLog(hash) {
				if (this.implementinfo.methond == 'approve') {
					return
				}
				let parme = {
					hash: hash,
					from_address: this.implementinfo.from,
					from_contract: this.implementinfo.from_contract,
					from_amount: this.implementinfo.valueEther,
					to_address: this.implementinfo.from,
					to_contract: this.implementinfo.to_contract,
					to_amount: this.implementinfo.to_amount,
				}
				addSwapLog(parme).then(res => {
					if (res.code == 200) {
						this.swapLogs()
					}
				}).catch(err => {

				})
			},
			//添加夸链记录
			addCrossLog(hash) {
				if (this.implementinfo.methond == 'approve') {
					return
				}
				let parme = {
					from_chain_id: this.implementinfo.from_chain_id,
					from_address: this.implementinfo.from_address,
					from_contract: this.implementinfo.from_contract,
					from_hash: hash,
					from_amount: this.implementinfo.from_amount,
					to_chain_id: this.implementinfo.to_chain_id,
					to_address: this.implementinfo.to_address,
					to_contract: this.implementinfo.to_contract,
					to_amount: this.implementinfo.to_amount,
				}
				addCrossLog(parme).then(res => {
					if (res.code == 200) {
						this.crossLogs()
					}
				}).catch(err => {

				})
			},
			//获取跨链记录
			crossLogs() {
				let parme = {
					address: this.address,
					page: 1,
					chainid: this.chainId
				}
				crossLogs(parme).then(res => {
					if (res.code == 200) {
						this.crosslog = res.data.data
					}
				}).catch(err => {

				})
			},
			//获取兑换记录
			swapLogs() {
				if (this.chainId != '5867') return
				let parme = {
					address: this.address,
					page: 1
				}
				swapLogs(parme).then(res => {
					if (res.code == 200) {
						this.swaplog = res.data.data
					}
				}).catch(err => {

				})
			},
			// 切换顶部，手动点击
			select(value) {
				if (this.selected != value) {
					this.selected = value
					this.selectAddress = ''
					this.crossLogs()
					this.swapLogs()
				}
			},
			// 切换顶部，左右滑动
			change(e) {
				if (this.selected != e.detail.current) {
					this.selected = e.detail.current
					this.selectAddress = ''
				}
			},
			// 打开地址选择
			openselectaddres() {
				this.$refs.popup5.open()
			},
			// 关闭选择
			closeselectaddress() {
				this.$refs.popup5.close()
			},
			// 选择地址
			selectaddress(address) {
				this.selectAddress = address + '_' + Date.now()
				this.$refs.popup5.close()
			},
			// 打开链选择
			openselectchain() {
				this.$refs.popup1.open()
			},
			// 选择链
			selectchain(item) {
				this.selectAddress = ''
				this.toChainId = item.chainId
				this.$refs.Jumpcross.chainname = item.chainName
				this.getIdList()
				this.$refs.popup1.close()
			},
			// 关闭选择
			closeselectchain() {
				this.$refs.popup1.close()
			},
			// 打开授权弹窗
			approveopen(data) {
				this.token = data.token
				this.type = data.type
				this.tip = data.tip
				this.$refs.popup2.open()
			},
			// 关闭授权弹窗
			approveclose() {
				this.$refs.popup2.close()
			},
			// 执行授权方法
			approve() {
				if (this.type == "JUMPCROSS") {
					this.$refs.Jumpcross.approvestatus = true
				} else if (this.type == "BSCCROSS") {
					this.$refs.Bsccross.approvestatus = true
				} else if (this.type == "TRONCROSS") {
					this.$refs.Troncross.approvestatus = true
				} else if (this.type == "SWAP") {
					this.$refs.swap.approvestatus = true
				}
				this.$refs.popup2.close()
			},
			// 打开代币选择弹窗
			openselecttoken() {
				this.$refs.popup3.open()
			},
			// 关闭代币选择弹窗
			closeselecttoken() {
				this.$refs.popup3.close()
			},
			// 选择代币
			selecttoken(item) {
				this.$refs.swap.selecttoken(item)
				this.$refs.popup3.close()
			},
			// 获取代币
			async getSwapCoin() {
				let params = {
					chain: "5867"
				}
				let res = await getSwapCoin(params);
				let tokenlist = res.data
				// 针对JUMP做特殊处理
				tokenlist.forEach(function(item) {
					if (item.name == "JUMP") {
						item.contract = "0x74Ee46a8E0B57aBC67C1E966DFB9948Bd9F927A0"
					}
				})
				this.tokenlist = tokenlist
			},
			// 打开执行弹窗
			executionopen(data) {
				console.log(data);
				this.type = data.type
				this.implementinfo = data.data
				this.$refs.popup4.open()
			},
			// 取消执行
			cancel() {
				this.$refs.popup4.close()
			},
			// 确认执行，打开密码弹窗
			determine() {
				this.$refs.passwordPopup.open()
			},
			// 关闭密码弹窗
			passwordclose() {
				this.$refs.passwordPopup.close()
			},
			// 密码弹窗点击确认
			implement() {
				// 输入框的值
				if (this.type == "JUMPCROSS") {
					this.$refs.Jumpcross.implementid = this.implementinfo.id
					this.$refs.Jumpcross.methond = this.implementinfo.methond
				} else if (this.type == "BSCCROSS") {
					this.$refs.Bsccross.implementid = this.implementinfo.id
				} else if (this.type == "TRONCROSS") {
					this.$refs.Troncross.implementid = this.implementinfo.id
				} else if (this.type == "SWAP") {
					this.$refs.swap.implementid = this.implementinfo.id
				}
				this.cancel()
				this.passwordclose()
			},
			//获取地址列表
			getIdList() {
				let chain = this.chainId != '5867' ? "5867" : this.toChainId
				uni.$db.select('list', { // 普通查询
					from: 'addressList',
					where: [{
						chainId: `= "${chain}"`,
					}],
				}).then(res => {
					if (res.length > 0) {
						this.list = res.reverse()
					} else {
						this.list = []
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #F7F7F7;

		.header {
			width: 100%;
			background-color: #FFF;
			position: fixed;
			left: 0upx;
			right: 0upx;
			top: 0upx;
			z-index: 98;
			height: 80upx;

			.hezi {
				height: 80upx;

				.boxs {
					width: 484upx;
					height: 80upx;
					margin: 0upx auto;
					display: flex;
					justify-content: space-between;
					position: relative;
					align-items: center;
					// padding-bottom: 20upx;

					.box {
						line-height: 44upx;
						font-size: 32upx;
						color: #9A9A9A;
					}

					.active {
						font-weight: bold;
						color: #FF760F;
					}

					.xian {
						width: 48upx;
						height: 8upx;
						border-radius: 4upx;
						background-color: #FF760F;
						position: absolute;
						bottom: 0upx;
					}
				}
			}

		}

		.zhead {
			width: 100%;
			height: 80upx;
		}

		.blockcotent {
			min-height: 0upx;
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-bottom: 120upx;

			.bigblock {
				min-height: 0upx;
				height: 100%;
				display: flex;
				flex-direction: column;
				// padding-top: 120upx;

				.swiper {
					min-height: 0upx;
					flex: 1;

					.zanwei {
						display: block;

						.image {
							display: block;
							margin: 0upx auto;
							margin-top: 300upx;
							width: 80%;
						}

						.text {
							display: block;
							text-align: center;
							margin-top: 50upx;
							color: #ccc;
						}
					}
				}
			}
		}

	}

	.block3 {
		height: 600upx;
		width: 686upx;
		background-color: #fff;
		border-radius: 20upx 20upx 20upx 20upx;
		position: relative;
		z-index: 1000000 !important;

		.line1 {
			text-align: center;
			position: relative;
			padding-top: 32upx;
			padding-bottom: 30upx;

			.text1 {
				font-size: 36upx;
				color: #333333;
			}

			.icon1 {
				width: 48upx;
				height: 48upx;
				position: absolute;
				right: 32upx;
				top: 32upx;
				border-radius: 50%;
				background-color: #EEEEEE;
				text-align: center;
				line-height: 48upx;
			}
		}

		.line2box {
			.line2 {
				display: flex;
				justify-content: space-between;
				padding: 0upx 32upx;
				align-items: center;
				margin-top: 24upx;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.image1 {
						width: 72upx;
					}

					.text1 {
						font-size: 32upx;
						color: #4B3E58;
						margin-left: 16upx;
					}
				}

				.right {
					font-size: 40upx;
					color: #4B3E58;
				}
			}
		}

		.line3 {
			width: 686upx;
			line-height: 88upx;
			text-align: center;
			font-size: 28upx;
			color: #fff;
			background: #26CF6D;
			margin: 0px auto;
			margin-top: 40upx;
			border-radius: 18upx;
			margin-top: 44upx;

		}
	}

	.block4 {
		width: 686upx;
		padding: 32upx 56upx;
		border-radius: 48upx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		z-index: 100000;

		.title {
			font-size: 48upx;
			color: #333333;
			text-align: center;
			border-bottom: 2upx solid #F7F7F7;
			padding-bottom: 32upx;
		}

		.line1 {
			font-size: 28upx;
			color: #545454;
			margin-top: 32upx;
		}

		.line2 {
			margin-top: 30upx;
			height: 96upx;

			.input {
				height: 96upx;
				width: 100%;


			}
		}

		.line3 {
			font-size: 32upx;
			color: #333;
			margin-top: 16upx;

			.tip {
				color: red;
			}
		}

		.line4 {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.button {
				width: 271upx;
				height: 92upx;
				line-height: 92upx;
				border-radius: 64upx;
				text-align: center;
				color: #fff;
				margin-top: 48upx;
			}

			.button1 {
				background: #FFBC42 !important;
			}

			.button2 {

				background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
			}
		}

	}

	.block6 {
		// height: 1150upx;
		background-color: #fff;
		align-items: center;
		border-radius: 20upx 20upx 0upx 0upx;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 36upx;
			flex-direction: row;
			justify-content: center;
			border-bottom: 2upx solid #D8D8D8;
			padding-top: 34upx;
			padding-bottom: 24upx;
			width: 750upx;
		}

		.line1 {
			margin-top: 32upx;
			align-items: center;
			width: 640upx;
			background-color: #F5F6F8;
			border-radius: 20upx;
			;
			padding-bottom: 12upx;

			.image {
				width: 66upx;
			}

			.box2 {
				flex-direction: row;
				justify-content: center;
				font-size: 24upx;
				color: #999999;
				margin-top: 14upx;
			}

			.box3 {
				flex-direction: row;
				justify-content: center;
				font-size: 32upx;
				color: #3D3D3D;
				margin-top: 14upx;
			}

			.box4 {
				width: 600upx;
				font-size: 24upx;
				border: 2upx solid #D56B6F;
				background-color: #FFEDED;
				padding: 30upx 24upx;
				color: #D56B6F;
				border-radius: 12upx;
				margin-top: 32upx;
			}



		}


		.line2 {
			width: 638upx;
			flex-direction: row;
			justify-content: flex-start;
			padding-top: 54upx;
			padding-bottom: 54upx;
			height: 186upx;
			border-bottom: 1upx solid #D8D8D8;

			.text1 {
				font-size: 28upx;
				color: #999999;
				width: 152upx;
			}

			.text2 {
				font-size: 28upx;
				color: #3D3D3D;
				flex: 1;
				width: 100upx;
			}


		}

		.line3 {
			width: 640upx;
			flex-direction: row;
			margin-top: 56upx;
			padding-bottom: 42upx;
			border-bottom: 1upx solid #D8D8D8;

			.text1 {
				font-size: 28upx;
				color: #999999;
			}

			.box2 {
				flex: 1;
				margin-left: 54upx;

				.text2 {
					font-size: 28upx;
					color: #3D3D3D;
				}

				.text3 {
					font-size: 20upx;
					color: #999999;
				}
			}

		}

		.buttons {
			flex-direction: row;
			justify-content: center;
			margin-top: 40upx;
			padding-bottom: 40upx;

			.box {
				width: 638upx;
				flex-direction: row;
				justify-content: space-between;

				.button1 {
					width: 293.48upx;

					.text1 {
						font-size: 26upx;
						color: #F6F6F6;
						line-height: 88upx;
						background-color: #FFBC42;
						border-radius: 10upx;
						flex-direction: row;
						justify-content: center;
						text-align: center;
					}
				}

				.button2 {
					width: 293.48upx;

					.text1 {
						font-size: 26upx;
						color: #F6F6F6;
						line-height: 88upx;
						background-color: #A9E993;
						border-radius: 10upx;
						flex-direction: row;
						justify-content: center;
						text-align: center;
					}
				}
			}
		}
	}


	/deep/ .uni-margin-wrap {
		height: 100%;
	}

	/deep/ .swiper {
		height: 100%;
		overflow-y: scroll;
	}

	/deep/ .uni-swiper-slide-frame {
		// overflow-y: scroll;
	}

	// 底部弹窗
	.popupTitle {
		text-align: center;
		position: relative;
		height: 110upx;
		line-height: 110upx;
		font-size: 36upx;
		border-bottom: 1upx solid #D8D8D8;

		.iconfont {
			position: absolute;
			right: 30upx;
		}
	}

	.numberBox {
		padding: 0 56upx;
		margin-top: 32upx;

		.number {
			width: 100%;
			text-align: center;
			font-size: 36upx;
			color: #3D3D3D;
			background: #F5F6F8;
			border-radius: 12upx;
			line-height: 96upx;
		}
	}

	.toAddress {
		margin-top: 0;
		border-top: 1upx solid #D8D8D8;
		border-bottom: 1upx solid #D8D8D8;
	}

	.fromAddress,
	.toAddress {
		padding: 54upx 54upx 52upx;
		font-size: 28upx;
		display: flex;

		.left {

			color: #999999;
			width: 152upx;
		}

		.right {
			flex: 1;

			.address {
				color: #3D3D3D;
				word-break: break-all;
			}

			.chain {
				color: #999999;
				font-size: 20upx;
			}
		}
	}

	.popupBtn {
		padding: 30upx 40upx;
		display: flex;
		justify-content: space-between;

		.pbtn {
			font-size: 26upx;
			color: #F6F6F6;
			line-height: 88upx;
			background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
			border-radius: 10upx;
			text-align: center;
			width: 46%;
		}

		.quxiaopth {
			background: #FFBC42 !important;
		}
	}


	:deep(.uni-popup-dialog) {
		background-color: #F5F6F8;

		.uni-dialog-title {
			.uni-popup__info {
				color: #3D3D3D;

				.uni-dialog-title-text {
					font-size: 36upx;
					font-weight: 400;
				}

			}
		}

		.uni-dialog-button-group {
			border-top-color: #D8D8D8;
			border-top-width: 1upx;

			.uni-dialog-button-text {
				color: #368521;
			}

			.uni-border-left {
				border-left-color: #D8D8D8;
				border-left-width: 1upx;

				.uni-button-color {
					color: #D56B6F;
					font-size: 28upx;
				}
			}
		}

	}



	.uni-form-item {
		width: 100%;

		.input-wrapper {
			display: flex;
			height: 70upx;
			background: #FFFFFF;
			padding: 0 0upx;
			border: 1upx solid #999999;
			align-items: center;
			border-radius: 10upx;

			.uni-input {
				flex: 1;
			}

			.icon {
				width: 32upx;
				height: 32upx;
			}
		}
	}

	.scroll-Y {
		min-height: 50vh;
		flex: 1;
		box-sizing: border-box;
		padding: 0 30upx;

		.item {
			display: flex;
			align-items: center;
			background: #FFF;
			padding: 20upx 0;
			margin-top: 20upx;
			border-radius: 10upx;

			.chainIcon {
				width: 68upx;
				height: 68upx;
			}

			.icon {
				width: 20upx;
				height: 20upx;
			}

			.con {
				flex: 1;
				margin-left: 20upx;

				.address {
					color: #A7A7A7;
				}
			}
		}
	}
</style>